<template>
  <div class="add-note">
    <van-nav-bar
      left-text="取消"
      right-text="发布"
      @click-left="onClickCancel"
      @click-right="onClickRelease"
      :fixed="true"
      :safe-area-inset-top="true"
      :placeholder="true"
    />
    <van-cell-group inset>
      <van-field
        required
        v-model="note.title"
        placeholder="填写标题会有更多赞嗷 ~"
        maxlength="30"
      />
    </van-cell-group>

    <van-cell-group inset>
      <van-field
        v-model="note.content"
        rows="8"
        autosize
        type="textarea"
        maxlength="1000"
        placeholder="美好的一天，写点什么叭"
        show-word-limit
      />
    </van-cell-group>
    <van-cell-group inset>
      <van-uploader
        v-model="note.imgList"
        multiple
        :max-count="12"
        capture="camera"
        previewSize="90px"
      />
    </van-cell-group>
    <van-cell-group inset>
      <van-field
        left-icon="location"
        label="添加地点"
        v-model="note.place"
        placeholder="写一下对应的地点吧 ~"
      />
      <!-- <van-field
        left-icon="chat"
        label="参与话题"
        v-model="note.tag"
        maxlength="15"
        placeholder="带有话题会有更多赞嗷 ~"
        show-word-limit
      /> -->
    </van-cell-group>
  </div>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity';
import { onBeforeMount } from '@vue/runtime-core';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { upload } from '../../api/interface';
import { Toast, Dialog } from 'vant';
export default {
  setup() {
    const router = useRouter();
    const store = useStore();
    const state = reactive({
      note: {
        title: '',
        content: '',
        place: '南昌',
        tag: '',
        createTime: '',
        imgList: [],
      },
    });

    const onClickCancel = async () => {
      if (
        state.note.content !== '' ||
        state.note.imgList.length !== 0 ||
        state.note.title !== ''
      ) {
        await Dialog.confirm({
          // title: "标题",
          message: '是否保存草稿箱？',
          confirmButtonText: '保存',
          cancelButtonText: '不保存',
        })
          .then(() => {
            Toast('保存啦');
            localStorage.setItem('savedNote', JSON.stringify(state.note));
          })
          .catch(() => {
            Toast('不保存啦');
            localStorage.removeItem('savedNote');
          });
      }
      router.go(-1);
    };
    const onClickRelease = async () => {
      const formData = new FormData();
      state.note.imgList &&
        state.note.imgList.forEach(async (item) => {
          formData.append('file', item.file);
        });

      if (state.note.imgList.length != 0) {
        Toast.loading({
          duration: 0,
          forbidClick: true,
          message: '图片上传中',
        });
        await upload(formData).then((res) => {
          state.note.imgList = res.data;
          Toast.clear();
        });
        // localStorage.removeItem("savedNote");
      }
      state.note.createTime = new Date().Format('yyyy-MM-dd hh:mm:ss');
      await store.dispatch('_releaseNote', state.note);
      window.location.href = '/my';
    };
    onBeforeMount(() => {
      // 在本地获取可能存储的
      let localStorageData = localStorage.getItem('savedNote');
      if (localStorageData) {
        var item = JSON.parse(localStorageData);
        state.note = item;
      }
    });
    return { ...toRefs(state), onClickCancel, onClickRelease };
  },
};
</script>
<style lang="less">
.add-note {
  margin-bottom: 10vh;
}
</style>
